<template>
	<yb-page style="background-color:rgba(0,0,0,.5)">
		<yb-status-bar color="rgba(0,0,0,.5)"></yb-status-bar>
		<yb-list type="scroll" custom-class="yb-flex-1">
			<yb-gap size="50"></yb-gap>
			<yb-image :options="{
				bgColor: skinColor.color_bg_2,
			}" :custom-style="{
				'height': poster ? 'auto' : imageMinHeight + 'px'
			}" custom-class="poster-image" :src="poster" mode="widthFix">
				<template #loading>
					<yb-text :color="skinColor.color_3" size="30" value="生成海报中"></yb-text>
				</template>
			</yb-image>
			<yb-gap size="50"></yb-gap>
		</yb-list>
		<view v-if="show" elevation="3" class="poster-btns yb-flex" :style="{
			'background-color': skinColor.color_bg_2,
		}">
			<text class="poster-btn" @tap="share" :style="{color: skinColor.color_1}">分享到</text>
			<yb-gap size="1px" :color="skinColor.color_gap_1"></yb-gap>
			<text class="poster-btn" @tap="save" :style="{color: skinColor.color_1}">保存到手机</text>
			<yb-gap size="10" :color="skinColor.color_gap_1"></yb-gap>
			<text class="poster-btn" @tap="hide" :style="{color: skinColor.color_1}">取消</text>
		</view>
		<yb-poster ref="poster"></yb-poster>
		<yb-notify ref="notify"></yb-notify>
	</yb-page>
</template>

<script>
	import appMixin from '@/common/mixin/app.js'
	export default {
		mixins: [appMixin],
		computed: {
			imageMinHeight () {
				return this.windowHeight - uni.upx2px(100) - uni.getSystemInfoSync().safeArea.top
			}
		},
		data () {
			return {
				params: '',
				poster: '',
				show: false
			}
		},
		onLoad(data) {
			this.params = data.params && JSON.parse(decodeURIComponent(data.params))
		},
		onReady() {
			this.$nextTick(function () {
				this.start()
			})
		},
		methods: {
			start () {
				let imageUrl = this.params.cover
				if ( imageUrl ) {
					this.app.$business.selectReferer(imageUrl).then(src => {
						uni.getImageInfo({
							src: src,
							success: (rect) => {
								this.perposePoster(rect, src)
							},
							fail: (err) => {
								this.$refs.notify.fail('uni.getImageInfo:fail')
							}
						})
					})
				} else {
					this.perposePoster()
				}
			},
			perposePoster(rect, src) {
				let imageHeight = rect ? (700 / rect.width) * rect.height : 0
				if ( imageHeight / 750 > 2 ) { imageHeight = 2 * 750 }
				const height = imageHeight + 300
				const form = [{
					text: this.params.title,
					x: 300,
					y: imageHeight + 80,
					color: '#333',
					size: 32,
					lines: 1,
					width: 445,
					style: 'fill',
					type: 'text'
				},{
					text: this.params.desc || '这是来自《' + this.app.$business.filterSource(this.params.source).title + '》的' + this.app.$business.getType(this.params.type),
					x: 280,
					y: imageHeight + 120,
					color: '#666',
					size: 24,
					width: 445,
					lineHeight: uni.upx2px(10),
					lines: 4,
					style: 'fill',
					type: 'text'
				},{
					text: 'By   ' + this.app.$config.app.name,
					x: 580,
					y: imageHeight + 280,
					color: '#222',
					size: 18,
					style: 'fill',
					type: 'text'
				},{
					src: 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&margin=10&data=' + this.params.shareUrl,
					x: 50,
					y: imageHeight + 50,
					width: 200,
					height: 200,
					type: 'image'
				},{
					text: '长按识别二维码',
					x: 80,
					y: imageHeight + 280,
					color: '#333',
					size: 20,
					style: 'fill',
					type: 'text'
				}]
				const options = {
					width: 750,
					height: height,
					background: '#ffffff',
					radius: 20
				}
				if ( src ) {
					form.unshift({
						src: src,
						x: 25,
						y: 25,
						width: 700,
						height: imageHeight,
						type: 'image'
					})
				}
				this.$refs.poster.start({
					options: options,
					data: form,
					success: (res) => {
						this.show = true
						this.poster = res.tempFilePath
					},
					fail: (err) => {
						this.$refs.notify.fail('生成海报失败')
					}
				})
			},
			save () {
				uni.saveImageToPhotosAlbum({					filePath: this.poster,					success: () => {						this.$refs.notify.success('成功保存图片到相册')					},					fail: err => {						this.$refs.notify.fail(err.toString())					}				})
			},
			share () {
				this.app.$business.shareFile(this.poster)
			},
			hide () {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}
	.poster-btns {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.poster-btn {
		padding: 30rpx 0;
		font-size: 38rpx;
		text-align: center;
	}
	.poster-image {
		width: 700rpx;
		min-height: 1000rpx;
		margin: 0 25rpx;
	}
</style>